import Vue from 'vue'
import Vuex from 'vuex'
import _ from 'lodash'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    globalStyle: null,
    bgStyle: null,
    topStyle: null,
    leftStyle: null,
    rightStyle: null,
    bottomStyle: null,
    compPath: null,
    compDataLs: [],
    compLs: [],
    moving: null
  },
  mutations: {
    SET_STATES (state, payload) {
      for (let key in payload) {
        state[key] = payload[key]
      }
    },
    SET_MOVING_DATA (state, {id, height}) {
      let index = 0, data = null, oldPath = null
      for (let i = 0; i < state.compPath.length; i++) {
        let path = state.compPath[i]
        if (path.id === id) {
          index = i
          data = {..._.cloneDeep(path), ...{id: 'temp_moving_id', type: 'Moving'}}
          oldPath = path
          break
        }
      }
      state.moving = {oldPath, index, height}
      state.compPath.splice(index, 0, data)
    },
    SET_MOVING_INDEX (state, {id, insertPos}) {
      if (id !== 'temp_moving_id') {
        let {index} = state.moving
        state.compPath.splice(index, 1)
        let newIndex = state.compPath.findIndex(item => item.id === id)
        let data = {..._.cloneDeep(state.compPath[newIndex]), ...{id: 'temp_moving_id', type: 'Moving'}}
        let insertIndex = insertPos === 'before' ? newIndex : newIndex + 1
        state.compPath.splice(insertIndex, 0, data)
        state.moving.index = insertIndex
      }
    },
    SET_MOVED_DATA (state) {
      let {oldPath, index} = state.moving
      let {container, side} = state.compPath[index]
      let delIndex = state.compPath.findIndex(item => item.id === oldPath.id)
      oldPath.container = container
      oldPath.side = side
      state.compPath[index] = oldPath
      state.compPath.splice(delIndex, 1)
    },

    // 主题相关
    SET_MOD_COLOR (state, {value}) {
      state.globalStyle.modStyle.color = value
    },
    SET_MOD_PADDING (state, {value}) {
      state.globalStyle.modStyle.paddingBottom = value
    },
    SET_GLOBAL_FONT (state, {value}) {
      state.globalStyle.baseStyle.fontFamily = value
    },
    SET_GLOBAL_SIZE (state, {value}) {
      state.globalStyle.baseStyle.fontSize = value
    },
    SET_GLOBAL_PADDING (state, {value}) {
      state.globalStyle.baseStyle.padding = value
    },
    // 用户数据相关
    REGISTER (state, comp) {
      state.compLs.push(comp)
    },
    // 删除模块
    DEL_MOD (state, {id}) {
      new Promise(resolve => {
        let delMod = state.compPath.find(item => item.id === id)
        delMod.show = !delMod.show
        resolve()
      }).then(() => {
      })
    },
    ADD_MOD (state) {
      let {container, side} = state.globalStyle.defaultContainer
      let id = `customize_${_.random(Date.now())}`
      let path = {
        id,
        type: 'Customize',
        name: '自定义模块...',
        container,
        side,
        show: true
      }
      let data = {
        id,
        type: 'Customize',
        name: '自定义模块...',
        settings: {
          switchLs: [
            {
              type: 'title',
              name: '隐藏标题栏目',
              status: true
            }
          ]
        },
        dataLs: {
          title: '',
          content: ''
        }
      }
      state.compPath.push(path)
      state.compDataLs.push(data)
    },
    SAVE_DATA (state, {template}) {
      state.compDataLs = state.compLs.map(comp => {
        return {id: comp.compId, name: comp.title, settings: comp.settings, dataLs: comp.dataLs}
      })
      localStorage.setItem(`compPath-${template}`, JSON.stringify(state.compPath))
      localStorage.setItem('compData', JSON.stringify(state.compDataLs))
      return state.compDataLs
    }
  }
})
